<template>
  <Transition name="slide-fade">
    <div class="custom-collapse-sidebar" v-if="sidebarShow">
      <div class="list-header">
        <span class="title-text">{{ title }}</span>
      </div>
      <div class="list-search-box energy-from">
        <el-input v-model="name" :placeholder="title + '（模糊搜索）'" clearable>
          <template #append>
            <el-button size="small" @click="initHospital()">
              <el-icon>
                <ele-Search />
              </el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
      <el-scrollbar height="100%">
        <div class="maintain-list-box">
          <ul v-if="institutionList.length">
            <li class="maintain-item" v-for="item in institutionList" :key="item.organName"
              :class="{ isActive: item.id == selectId }" @click="selectHospitalItem(item)">
              {{ item.organName }}
            </li>
          </ul>
          <div class="flex col-center row-center" v-else>
            <NoData></NoData>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ref } from 'vue';

defineProps({
  sidebarShow: {
    type: Boolean,
    default: () => false,
  },
  title: {
    type: String,
    default: () => '医院列表',
  },
  institutionList: {
    type: Array as any,
    default: () => [],
  },
  selectId: {
    default: () => '',
  },
});
let name = ref('');
const emits = defineEmits(['initHospital', 'selectHospitalItem']);
const initHospital = () => emits('initHospital', name.value);
const selectHospitalItem = (item: Object) => emits('selectHospitalItem', item);
</script>

<style lang="scss" scoped>
.custom-collapse-sidebar {
  width: 300px;
  height: 100%;
  background: rgba(27, 58, 123, 0.54);
  border-radius: 4px;
  padding-bottom: 120px;
  // border-bottom: 1px solid #dcdfe6;

  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 10px;
    border-bottom: 1px solid #30539b;

    .title-text {
      color: #d7e4ff;
      font-size: 18px;
    }
  }

  .list-search-box {
    padding: 10px;
  }

  .maintain-list-box {
    padding: 10px;

    .maintain-item:hover {
      background: linear-gradient(88deg, #499afd 0%, #0e45b6 100%) !important;
      color: #fff;
      opacity: 0.6;
    }

    .maintain-item {
      display: flex;
      align-items: center;
      width: 100%;
      list-style: none;
      box-sizing: border-box;
      padding: 10px;
      cursor: pointer;
      font-size: 14px;
      margin-bottom: 10px;
      border-radius: 3px;
      color: #d7e4ff;
      position: relative;
      background-color: #193c86;
    }

    .maintain-item.isActive {
      background: linear-gradient(88deg, #499afd 0%, #0e45b6 100%) !important;
      color: #fff;
      //     background: #0f2c69 !important;
      // color: #499afd !important;
    }
  }
}
</style>
